<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :header-right="headerRight" :call-back="()=>{}"></xcl-header>

<div class="content" id="content">
	<xcl-tab :tab-titles="tabTitles" :click-fn="tabClickFn"></xcl-tab>
	<div v-if="myOrder.length == 0  && loading.show === false" class="no-data">暂无数据</div>
  	<div class="card" v-for="p in myOrder" transition="fade" v-link="{ name:'MyOrderView', params:{orderId: p.sid}}">
	    <div class="card-header">
	    	{{p.n}}
	    	<div class="pull-right" style="font-size: 0.7rem;color:#999;">{{p.ot | getLastTimeStr}}</div>
	    </div>
	    <div class="card-content lh">
	      	<div class="card-content-inner">
		        <div class="item-inner">
		          <div class="item-title row">
		          		<div class="col-25">申请类型</div>
		          		<div class="col-75 t2">{{p.t | orderType}}</div>
		          </div>
		        </div>
		         <div class="item-inner">
		          <div class="item-title row">
		          		<div class="col-25">申请金额</div>
		          		<div class="col-75 t2">￥{{p.i | formatMoney}}</div>
		          </div>
		        </div>
		         <div class="item-inner">
		          <div class="item-title row">
		          		<div class="col-25">订单状态</div>
		          		<div class="col-75 t2">{{p.s | orderStatus }}</div>
		          </div>
		        </div>
	      	</div>
	    </div>
  </div>

</div>

  <xcl-loading :show="loading.show"></xcl-loading>
  </div>
</template>
<script>
import xclHeader from '../components/header.vue'
import xclFooter from '../components/footer.vue'
import xclLoading from '../components/loading.vue'
import xclTab from '../components/tab.vue'
let UserProxy =  require("../proxy/user_proxy");
let User = new UserProxy();
let ProductProxy =  require("../proxy/product_proxy");
let Product = new ProductProxy();
  export default {
        data (){
            return {
                scroll:true,
                pageTitle:'我的订单',
                headerRight:'',
                tabTitles:[
                    {title:'全部',order:-1,active:true},
                    {title:'购买',order:1,active:false},
                    {title:'追加',order:2,active:false},
                    {title:'赎回',order:3,active:false},
                ],
                myOrder:[],  
                curOrder:-1,
                curPage:1,          
                loading:{
                    show:false
                }
                
            }
        },
        route:{
            deactivate (transition){
                $('#content').off('scroll');
                transition.next();
            }
        },
        methods:{
            tabClickFn(order){
                this.tabTitles.forEach((item,index)=>{
                    order===item.order ? item.active =true :item.active = false;
                });
                this.curOrder = order;
                this.curPage = 1;
                this.myOrder=[];
                this.getMyProducts(this.curOrder,this.curPage);
            },
        	getMyProducts(order,page){
        		var _this = this;
        		_this.loading.show = true;
        		Product.getProductOrders(localStorage.token,'',order,'',0,new Date()*1,-1,page,5,(d)=>{
        			if(d.code == 200 && d.results && d.results.length){
                        this.scroll = true;
        				_this.myOrder = _this.myOrder.concat(d.results);
        			}else{
                        //_this.myOrder = [];
                    }
                    _this.loading.show = false;

        		});
        	},
            //滚动加载数据
            getScrollData (){
                if(this.scroll){
                    let $content=$('#content');
                    if ($content.height() + $content[0].scrollTop >= $content[0].scrollHeight - 10) {
                        this.scroll = false;
                        this.curPage++;
                        this.getMyProducts(this.curOrder,this.curPage);
                    }
                }
            }
        },
        ready(){
            var _this = this;
        	this.getMyProducts(-1,1);
            $('#content').on('scroll', () => {
              this.getScrollData();
            });
        },
        components:{
           "xclHeader":xclHeader,
           "xclFooter":xclFooter,
           "xclLoading":xclLoading,
           "xclTab":xclTab
        }
  }
</script>
<style lang="stylus">
	.message-account
		padding:0 0.3rem
		background-color:red
		border-radius:0.5rem
		font-size:0.5rem
	.lh	
		line-height 1.7em
</style>